<!--  -->
<template>
  <div class="mytop">
    <div class="top">
      <div class="__easyv-component" id="333316">
        <div class="title">
          <div>
            <div>
              <span>权益金数据分析</span>
              <div>
                <span>权益金数据分析</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="leftani1">
      <video
        width="727"
        height="120"
        autoplay="autoplay"
        muted
        loop
        src="../../../assets/video/01.mp4"
      ></video>
    </div>
    <div class="rightani1">
      <video
        width="727"
        height="120"
        autoplay="autoplay"
        muted
        loop
        src="../../../assets/video/01.mp4"
      ></video>
    </div>
    <div class="leftani2">
      <video
        autoplay="autoplay"
        muted
        loop
        width="786"
        height="175"
        src="../../../assets/video/03.mp4"
      ></video>
    </div>
    <div class="rightani2">
      <video
        autoplay="autoplay"
        muted
        loop
        width="786"
        height="175"
        src="../../../assets/video/03.mp4"
      ></video>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {};
  },
};
</script>
<style scoped>
.rightani1 {
  transform: rotateY(180deg);
  position: absolute;
  width: 728px;
  height: 120px;
  left: 1050px;
  top: -15px;
  mix-blend-mode: screen;
  filter: contrast(105%);
  pointer-events: auto;
}
.leftani1 {
  position: absolute;
  width: 727px;
  height: 120px;
  left: -300px;
  top: -15px;
  mix-blend-mode: screen;
  filter: contrast(105%);
  pointer-events: auto;
  z-index: 2;
}
.leftani2 {
  position: absolute;
  width: 786px;
  height: 175px;
  top: 0;
  left: -10px;
  mix-blend-mode: screen;
  pointer-events: auto;
  z-index: 2;
}
.rightani2 {
  transform: rotateY(180deg);
  position: absolute;
  width: 786px;
  height: 175px;
  top: 5px;
  right: -15px;
  mix-blend-mode: screen;
  pointer-events: auto;
}
</style>
<style lang='sass' scoped>
.top
  position: absolute
  top: 0
  left: 0
  height: 229px
  z-index: 9
  width: 100%
  background: url('../../../assets/images/top.png') no-repeat center top

.__easyv-component
  position: absolute
  left: 220px
  top: 0px
  width: 1088px
  height: 87px
  perspective: 1088px
  font-family: '优设标题黑'
  font-size: 36px
  font-weight: normal
  text-align: center
  letter-spacing: 20px
  line-height: 22
  overflow: visible
  z-index: 9
  cursor: pointer
  pointer-events: auto
  >.title
    width: 1088px
    font-family: 优设标题黑
    font-size: 36px
    font-weight: normal
    text-align: center
    letter-spacing: 20px
    line-height: 22px
    position: absolute
    top: 50%
    transform: translate(0px, -50%)
    text-shadow: rgba(103, 140, 235, 0.6) 0px 0px 24px
    padding: 0px
    -webkit-box-reflect: below -4px linear-gradient(transparent, rgba(0, 0, 0, 0))
    >div
      color: rgb(255, 255, 255)
      >div
        color: transparent
        position: relative
        div
          position: absolute
          left: 0px
          top: 0px
          width: 100%
          span
            color: rgb(255, 255, 255)
</style>